<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
	</head>
	<body>

		<table style="width:100%; table-layout:fixed">

			<tr>
				<td width="70%"><div id="combobox1" zxt="zxt.ui.Combobox" zxt.value="" zxt.required="true" zxt.chooseonly="false" zxt.autoShow="false"  zxt.labelonly="false" zxt.conf="RequireV:true" zxt.formatType="A(3)">
					<div zxt.option="A01" zxt.label="中国"></div>
					<div zxt.option="B01" zxt.label="日本"></div>
					<div zxt.option="C01" zxt.label="美国"></div>
					<div zxt.option="D01" zxt.label="加拿大"></div>
				</div></td>
				<td width="30%"><div id="btn1" zxt="zxt.ui.Button" zxt.label="change" zxt.text="GET VALUE" ></div><div id="btn1A" zxt="zxt.ui.Button" zxt.label="change" zxt.text="SET VALUE" ></div></td>
			</tr>

			<tr>
				<td width="70%">
				<div id="combobox2" zxt="zxt.ui.Combobox" zxt.required="false" zxt.value="WrongV" zxt.chooseonly="false" zxt.labelonly="false"  zxt.conf="PadLength:4" zxt.formatType="N(4)">
					<div zxt.option="10" zxt.label="中国"></div>
					<div zxt.option="11" zxt.label="日本"></div>
					<div zxt.option="200" zxt.label="美国"></div>
					<div zxt.option="300" zxt.label="加拿大"></div>
				</div></td>
				<td width="30%"><div id="btn2" zxt="zxt.ui.Button" zxt.label="change" zxt.text="GET VALUE" ></div><div id="btn2A" zxt="zxt.ui.Button" zxt.label="change" zxt.text="SET VALUE" ></div></td>
			</tr>

			<tr>
				<td width="70%">
				<div id="combobox7" zxt="zxt.ui.Combobox" zxt.value="4" zxt.required="false" zxt.chooseonly="falsee" zxt.conf="Format:'$LABEL$ $VALUE$', Hide:'0'">
					<div zxt.option="1" zxt.label="A"></div>
					<div zxt.option="2" zxt.label="B"></div>
				</div></td>
				<td width="30%"><div id="btn71" zxt="zxt.ui.Button" zxt.label="change" zxt.text="GET VALUE" ></div><div id="btn72" zxt="zxt.ui.Button" zxt.label="change" zxt.text="SET VALUE" ></div></td>
			</tr>

			<tr>
				<td width="70%">
				<div id="combobox9" zxt="zxt.ui.Combobox" zxt.value="3" zxt.labelonly="false" zxt.required="true" zxt.options="a:1,b:2" zxt.chooseonly="true" zxt.maxHeight="100px" zxt.conf="Format:'AAA $LABEL$ -- {$VALUE$}',AutoComplete:0,RequireV:true,Hide:'AAA c -- {3}'">
					<div zxt.option="3" zxt.label="c"></div>
					<div zxt.option="4" zxt.label="d"></div>
					<div zxt.option="5" zxt.label="e"></div>
					<div zxt.option="6" zxt.label="f"></div>
					<div zxt.option="7" zxt.label="g"></div>
					<div zxt.option="8" zxt.label="h"></div>
					<div zxt.option="9" zxt.label="i"></div>
					<div zxt.option="10" zxt.label="j"></div>
					<div zxt.option="11" zxt.label="k"></div>
					<div zxt.option="" zxt.label=" "></div>
				</div></td>
				<td width="30%"><div id="btn9" zxt="zxt.ui.Button" zxt.label="change" zxt.text="GET VALUE" ></div><div id="btn92" zxt="zxt.ui.Button" zxt.label="change" zxt.text="SET VALUE" ></div></td>
			</tr>
			<tr>
				<td>
					<div id="comboboxDiv"></div>
				</td>
				<td></td>
			</tr>

		</table>
		<table>
			<tr>
				<td width="20%">getType()</td>
				<td width="50%">返回控件类型</td>
				<td><input type="button" name="getType" value="getType" 
					onclick="alert('第一个可输入选择框控件的type为'+$zxtUI.combobox1.getType());"/></td>
			</tr>
			<tr>
				<td>afterOptionAdded(value, label)</td>
				<td>添加选项后调用的方法，未实现 需要时重载</td>
				<td></td>
			</tr>
			<tr>
				<td>autoShow(v)</td>
				<td>如果参数没上送，则返回当前的自动显示设置；否则，设置自动显示标志</td>
				<td><input type="button" name="autoShow" value="autoShow" 
					onclick="alert('第一个可输入选择框控件的autoShow为'+$zxtUI.combobox1.autoShow());"/></td>
			</tr>
			<tr>
				<td>choose() </td>
				<td>显示选中的下拉列表某项内容 内部调用函数</td>
				<td></td>
			</tr>
			<tr>
				<td>focus() </td>
				<td>设置当前控件焦点</td>
				<td><input type="button" name="focus" value="focus" 
					onclick="$zxtUI.combobox2.focus();alert('第二个可输入选择框控件获得焦点');"/></td>
			</tr>
			<tr>
				<td>formatType(v) </td>
				<td>如果参数没上送，则返回当前的值的格式设置；否则，设置值的格式 格式类型如N(4) A(20)</td>
				<td><input type="button" name="formatType" value="formatType" 
					onclick="alert('第二个可输入选择框控件的formatType为'+$zxtUI.combobox2.formatType());"/></td>
			</tr>
			<tr>
				<td>selectOption(opt) </td>
				<td>设置并校验选中的下拉表选项</td>
				<td><input type="button" name="selectOption" value="selectOption" 
					onclick="var opt = {};opt.label =3;opt.value = 'c';$zxtUI.combobox9.selectOption(opt);alert('第四个可输入选择框控件设置了选项');"/></td>
			</tr>
			<tr>
				<td>show(filter)</td>
				<td>打开下拉框筛选内容</td>
				<td><input type="button" name="show" value="show" 
					onclick="$zxtUI.combobox2.show('01');"/></td>
			</tr>
		</table>
		
		
		<div><a href="../index.html">返回</a></div>
	</body>
</html>
<script type="text/javascript">
	function onErrors(err) {
		alert(err);
		//$zxtUI.__messager.setMessage(err);
	};

	zxt.ui.Combobox.prototype.maxHeight = "200px";
	$zxt.init();

	function onClick$btn1() {
		var v = $zxtUI.combobox1.getValue();
		alert(v);
	};

	function onClick$btn1A() {
		$zxtUI.combobox1.setValue("B01");
		$zxtUI.combobox1.render();
	};

	function onClick$btn2() {
		var v = $zxtUI.combobox2.getValue();
		alert(v);
	};

	function onClick$btn2A() {
		$zxtUI.combobox2.setValue("200");
		$zxtUI.combobox2.render();
	};

	function onClick$btn71() {
		var v = $zxtUI.combobox7.getValue();
		alert(v);
	}

	function onClick$btn72() {
		$zxtUI.combobox7.setValue("0");
		$zxtUI.combobox7.render();
	}

	function onClick$btn9() {
		var v = $zxtUI.combobox9.getValue();
		alert(v);
	}

	function onClick$btn92() {
		$zxtUI.combobox9.setValue("AAA");
		$zxtUI.combobox9.render();
	}
	
	//combobox构造函数（是否必填，是否输入之必须是下拉框内的值，是否显示value）
	
	var box = new zxt.ui.Combobox(true,true,false);
	box.conf({RequireV:true});
	$zxt.register(box, "comboboxDiv");
	box.addOption("","");
	box.addOption("1","a");
	box.addOption("2","b");	
	box.addOption("3","c");
	box.setValue("");
	
	$("#comboboxDiv").append(box.render());
</script>
